<!--
 * @Author: 迷洛洛ywc
 * @Date: 2024-05-30 15:06:21
 * @LastEditors: 迷洛洛ywc
 * @LastEditTime: 2024-06-12 16:31:28
 * @Description: file content
-->
<template>
  <div class="ProductRecord">
    <!-- 种植标题 -->
    <div class="seed">
      <div class="seedIcon">
        <img src="@/assets/水稻.png" />
        <!-- <img src="../assets/image 3.png" /> -->
      </div>
      <div class="seedName">水稻溯源</div>
    </div>
    <div class="linkimg">
      <img src="../assets/gouzi.png" alt="" />
      <img src="../assets/gouzi.png" alt="" />
    </div>
    <!-- 认证图 -->
    <div class="attestation">
      <img src="../assets/Group-427319154.png" alt="" />
    </div>
    <div class="linkimg">
      <img src="../assets/gouzi.png" alt="" />
      <img src="../assets/gouzi.png" alt="" />
    </div>
    <!-- 作物详情 -->
    <!-- <div class="plantDetail">
      <div class="detailTit">产品简介</div>
      <div class="detailType">
        <div class="type1">品类：<span>嘉禾香1号</span></div>
        <div class="type2">
          种植标准：<img src="" /><span>{{
            suyuanData.plantingPatterns === 0 ? "普通" : "有机"
          }}</span>
        </div>
        <div class="type2">种植标准：<img src="" /><span>有机</span></div>
      </div>
      <div class="time">
        种植/采收日期：<span
          >{{ suyuanData.seedTime }}～{{ suyuanData.harvestTime }}</span
        >
      </div>
      <div class="detailContent">
        {{ suyuanData.customText }}
      </div>
    </div> -->
    <!-- 作物详情 -->
    <div class="plantDetail">
      <div class="detailTit">产品简介</div>
      <div class="detailType">
        <div class="type1">品类：<span>嘉禾香1号</span></div>
        <div class="type2">种植标准：<img src="../assets/Frame.png" alt="" /><span>有机</span></div>
      </div>
      <div class="time">种植/采收日期：<span> 2024/04/15~2024/10/23</span></div>
      <div class="detailContent">
        嘉禾香1号兼具粳稻口感和籼稻长粒外观，蒸煮食味品质优异，米香浓郁，米饭松软弹滑，适口性好。
      </div>
    </div>
    <div class="linkimg">
      <img src="../assets/gouzi.png" alt="" />
      <img src="../assets/gouzi.png" alt="" />
    </div>
    <!-- 产地信息 -->
    <div class="placeOrigin">
      <div class="placeOriginTit">产地信息</div>
      <!-- 地图 -->
      <div class="placeMap">
        <div class="mapBox">
          <placeMap></placeMap>
        </div>
        <div class="mapTit">地址：浙江省梅林村</div>
      </div>
      <!--监控 -->
      <div class="videoDevice">
        <div class="videoTit">实时监控</div>
        <van-loading class="loading" color="#1989fa"/>
        <div class="videoBox">
          <video
            ref="videoElement"
            style="width: 100%; height: 200px; border-ridius: 10px"
          ></video>
        </div>
      </div>
      <!-- 传感器 -->
      <div class="senseList">
        <div class="senseBox" v-for="(item, index) in senseData" :key="index">
          <div class="senseTit">{{ item.name }}</div>
          <div class="senseVal">{{ item.val }} {{ item.com }}</div>
        </div>
      </div>
    </div>
    <div class="linkimg">
      <img src="../assets/gouzi.png" alt="" />
      <img src="../assets/gouzi.png" alt="" />
    </div>
    <!-- 检测单位 -->
    <div class="examining">
      <div class="examiningTit">相关检测单位</div>
      <div class="examiningImg">
        <img src="../assets/examiningTit/Group_427319155.png" alt="" />
      </div>
      <div class="examiningImg">
        <img src="../assets/examiningTit/Group_427319156.png" alt="" />
      </div>
      <div class="examiningImg">
        <img src="../assets/examiningTit/Group_427319157.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
// import { getDetailByIdApi } from '@/api/tracing.js'
// import { Toast } from 'vant' // 按需引入,优化加载速度

import placeMap from '../components/map.vue'
import Hls from 'hls.js'
import { getVideoUrlApi } from '../api/device'

export default {
  name: 'ShuzhongtianH5ProductRecord',
  components: {
    placeMap
  },
  data () {
    return {
      id: '',
      suyuanData: {},
      seedInfo: {},
      farmRecord: {},
      link: '',
      seedTime: '--',
      harvestTime: '--',
      loading: true,
      senseData: [
        {
          name: '温度',
          val: '12.7',
          com: '℃'
        },
        {
          name: '湿度',
          val: '74.0',
          com: '%RH'
        },
        {
          name: '气压',
          val: '101.3',
          com: 'kPa'
        },
        {
          name: '风速',
          val: '0.0',
          com: 'm/s'
        }
      ],
      videoUrl: ''
    }
  },

  mounted () {
    // // console.log(this.$route.query)
    // if (Object.keys(this.$route.query).length === 0) {
    //   if (Object.keys(this.$store.state.suyuan).length !== 0) {
    //     this.id = this.$store.state.suyuan.id
    //   } else {
    //     Toast('暂无溯源信息')
    //   }
    // } else if (Object.keys(this.$store.state.suyuan).length !== 0 || this.$store.state.suyuan !== null) {
    //   console.log(this.id)
    // }
    // this.id = this.$route.query.tsId
    // this.getDetailById(this.id)
    this.getVideoUrl().then((res) => {
      this.playVideo(res)
    })
  },
  created () {},

  methods: {
    // 溯源信息
    // async getDetailById (id) {
    //   const res = await getDetailByIdApi(id)
    //   // console.log(res.data, '溯源信息')
    //   this.suyuanData = res.data
    //   this.$store.commit('setValue', this.suyuanData)
    //   this.loading = false
    // }
    // 获取监控
    async getVideoUrl () {
      const url = await getVideoUrlApi('AA7447577')
      // this.videoUrl = `https://open.ys7.com/ezopen/h5/iframe?url=ezopen://open.ys7.com/AA7447570/1.live&autoplay=1&accessToken=${url.data.access_token}`
      // return `https://open.ys7.com/ezopen/h5/iframe?url=ezopen://open.ys7.com/AA7447570/1.live&autoplay=1&accessToken=${url.access_token}`
      return url.带protocol
    },
    playVideo (url) {
      console.log(url)

      if (Hls.isSupported()) {
        const video = this.$refs.videoElement
        const hls = new Hls()
        hls.loadSource(url)
        hls.attachMedia(video)
      } else {
        // 如果不支持HLS，则回退到其他视频格式的播放方式
        // if (videojs.getTech('Html5').isSupported()) {
        //   const video = videojs(this.$refs.videoElement)
        //   video.src(url)
        // }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.ProductRecord {
  background: #147967;
}
.seed {
  width: 343px;
  height: 260px;
  background: #ffffff;
  border-radius: 0 0 15px 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  .seedIcon {
    width: 164px;
    height: 164px;
    background: #d9d9d9;
    border-radius: 50%;
    text-align: center;
    line-height: 164px;
    img {
      width: 70%;
      height: 65%;
      position: relative;
      padding-left: 5%;
      top: 10%;
    }
  }
  .seedName {
    width: 343px;
    text-align: center;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 20px;
    color: #333333;
    line-height: 24px;
    font-style: normal;
    text-transform: none;
    margin-top: -20px;
  }
}
// 连接图
.linkimg {
  position: relative;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  margin-top: -15px;
  img {
    width: 13px;
    height: 46px;
  }
}
// 认证图
.attestation {
  width: 434px;
  height: 272px;
  margin-top: -15px;

  img {
    width: auto;
    height: 272px;
  }
}
// 种植详情
.plantDetail {
  width: 343px;
  min-height: 255px;
  background: #fff;
  border-radius: 15px;
  padding: 32px 12px 32px;
  margin-top: -15px;

  .detailTit {
    width: 100%;
    height: 44px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    // border-bottom: 1px solid #e7e9e8;
    // margin-bottom: 12px;
    color: #19b560;
  }
  .detailType {
    min-height: 45px;
    font-weight: 400;
    font-size: 14px;
    color: #9ba5a2;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e7e9e8;
    // margin-bottom: 12px;

    .type1 {
      margin: 0 24px 0 0;
    }
    .type2 {
      display: flex;
      align-items: center;
      img {
        width: 20px;
        margin-right: 3px;
      }
    }
    span {
      font-size: 14px;
      color: #0a241b !important;
    }
  }
  .time {
    min-height: 45px;
    font-weight: 400;
    font-size: 14px;
    color: #9ba5a2;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e7e9e8;
    margin-bottom: 12px;

    .type1 {
      margin: 0 24px 0 0;
    }
    span {
      font-size: 14px;
      color: #0a241b !important;
    }
  }
  .detailContent {
    line-break: auto;
    font-size: 14px;
    line-height: 1.5;
  }
}
// 产地信息
.placeOrigin {
  width: 343px;
  height: 816px;
  background: #ffffff;
  border-radius: 15px;
  padding: 32px 12px 32px;
  margin-top: -15px;

  .placeOriginTit {
    width: 100%;
    height: 44px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    margin-bottom: 12px;
    color: #19b560;
  }
  .placeMap {
    width: 319px;
    height: 288px;
    background: #19b560;
    border-radius: 15px;
    position: relative;
    z-index: 1;
  }
  .mapTit {
    width: 196px;
    height: 48px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 14px;
    color: #ffffff;
    line-height: 48px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-left: 12px;
  }
  // 监控
  .videoDevice {
    position: relative;
    .loading {
      position: absolute;

      width: 100%;
      text-align: center;
      top: 45%;
      z-index: 8;

    }
    .videoTit {
      width: 56px;
      height: 22px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #0a241b;
      line-height: 22px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      margin-top: 24px;
      margin-bottom: 12px;
    }
    .videoBox {
      width: 319px;
      height: 182px;
      border-radius: 8px 8px 8px 8px;
      z-index: 10;
      position: relative;
      img {
        width: auto;
        height: 182px;
      }
    }
  }
  .senseList {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 16px;
    .senseBox {
      width: 154px;
      height: 84px;
      background: #ffffff;
      border-radius: 8px 8px 8px 8px;
      border: 1px solid #e8f8ef;
      padding: 12px;
      position: relative;
      .senseTit {
        margin-bottom: 12px;
      }
    }
    .senseBox::after {
      content: "";
      display: block;
      position: absolute;
      top: 16px;
      left: 0;
      width: 2px;
      height: 14px;
      background: #14c9c9;
      border-radius: 0px 0px 0px 0px;
    }
  }
}
// 检测单位
.examining {
  width: 343px;
  height: 226px;
  background: #ffffff;
  border-radius: 8px 8px 8px 8px;
  padding: 32px 12px;
  margin-top: -15px;
  .examiningTit {
    width: 96px;
    height: 24px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: #19b560;
    line-height: 24px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-bottom: 12px;
  }
  .examiningImg {
    img {
      height: 38px;
      width: auto;
    }
  }
}
</style>
